<template>
  <div>
    <!--工具类-->
    <Row>
      <i-col span="24" style="text-align: right">
        <Button type="primary" icon="md-add" class="tiy_btn" @click="addSearchKeyword" v-has=tRole.OTHER_7_101>新增</Button>
      </i-col>
    </Row>
    <Row style="padding-top: 10px;text-align: left" >
      <i-col span="24">
        <div>
          <Input v-model.trim="searchParams.keyword" placeholder="请输入关键字" clearable
                 class="modal_form_input"></Input>
          <Button type="primary" style="margin-right: 10px" icon="ios-search" @click="search">查询
          </Button>
        </div>
      </i-col>
    </Row>

    <!--列表-->
    <List border style="margin: 1rem 0">
      <ListItem v-for="(item,index) in searchKeywordList" style="display: flex; flex-direction: row;align-items: flex-start;">
        <div style="flex-shrink: 1;flex-grow: 1;text-align: left;padding: 0rem 1rem">
          {{'#'+(index+1)}}
          <KeyValueView title="搜索关键词">{{item.keyword}}</KeyValueView>
          <KeyValueView title="替换词" :value="checkEmpty(item.synonym)"></KeyValueView>
          <KeyValueView title="联想词" :value="checkEmpty(item.automatedWords)"></KeyValueView>
          <KeyValueView title="是否模糊查询">{{item.isFuzzy?'模糊':'不模糊'}}</KeyValueView>
          <KeyValueView title="创建时间" :value="$tiyBJTime(item.createTime)"></KeyValueView>

        </div>

        <div style="flex-shrink: 0">
          <Button type="primary" size="small" @click="modifyKeyword(index)" style="margin-right: 0.5rem">编辑</Button>
          <Button type="warning" size="small" @click="deleteKeyword(index)">删除</Button>
        </div>
      </ListItem>
    </List>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>

    <Modal v-model="status.modalAddEdit.isShow" :title="status.modalAddEdit.title"  :styles="{top: '20px',bottom:'20px',}">

      <div>
        <Form ref="paramProductSimple" :model="searchKeyword" :rules="rules" :label-width="120"
              class="modal_newuser_form">
              <FormItem label="关键字 :" prop="keyword">
                <Input  v-model="searchKeyword.keyword"
                        style="width: 80%"></Input>
              </FormItem>
          <FormItem label="替换词 :" prop="keyword">
            <Input  v-model="searchKeyword.synonym"
                    style="width: 80%"></Input>
          </FormItem>
              <FormItem label="联想词 :">
                <div>
                  <Tag closable @on-close="removeAutomatedWords(index)" v-for="(item, index) in searchKeyword.automatedWords">
                    {{item}}
                  </Tag>
                </div>
                <div>
                  <Input  v-model="searchKeyword.automatedWord"
                          style="width: 50%"></Input>
                  <Button icon="ios-add" type="dashed" size="small" @click="addAutomatedWords">添加标签</Button>
                </div>

              </FormItem>
              <FormItem label="是否支持模糊 :" prop="productName">
                <i-switch v-model="searchKeyword.isFuzzy">
                  <span slot="open">模糊</span>
                  <span slot="close"></span>
                </i-switch>
              </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" @click="webAddEditSearchKeyword()">保存</Button>
        <Button type="info" @click="status.modalAddEdit.isShow = false"  >取消</Button>
      </div>
    </Modal>

    <Modal v-model="status.modalDelete.isShow" title="删除关键字"  :styles="{top: '20px',bottom:'20px',}"
    @on-ok="webDeleteKeyword">

      <div>
        {{status.modalDelete.content}}
      </div>
    </Modal>

  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/keyword/keyword_data"
  import {
    init,
    webList,
    webAddEditSearchKeyword,
    webDeleteKeyword
  } from "./js/keyword/keyword_funs"
  import KeyValueView from "../widgets/KeyValueView";


  export default {
    components: {KeyValueView, ICol},
        data(){
          return {
            tRole:{
                OTHER_7_101:"OTHER-7-101", //头部-新增搜索联想关键词
            },
            tPage: tiyData.tPage,
            status: tiyData.tStatus,
            //搜索条件
            searchParams: tiyData.tParams.searchParams,
            searchKeyword: tiyData.tParams.searchKeyword,
            tData: tiyData.tData,
            rules: tiyData.tStatus.rules,
            tableTitles: tiyData.tableTitles(this),
            searchKeywordList:tiyData.tData.searchKeywordList,
            shortageRefundDetail:tiyData.tData.shortageRefundDetail,
            isShowDetail:false,
      }
    },
    computed : {},
    methods: {

      formatDate(date) {
        return date==null?"":this.$tiyBJTime(date);
      },
      checkEmpty(value){
        if (value===undefined||value===null||value.trim()===''){
          return "无"
        }else
          return value;
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      addSearchKeyword(){
        tiyData.tParams.searchKeyword.id = "";
        tiyData.tParams.searchKeyword.keyword = "";
        tiyData.tParams.searchKeyword.automatedWords = [];
        tiyData.tParams.searchKeyword.isFuzzy = false;
        tiyData.tParams.searchKeyword.synonym = "";
        tiyData.tStatus.modalAddEdit.isShow = true;
        tiyData.tStatus.modalAddEdit.title = "新增关键字";
      },
      webAddEditSearchKeyword(){
        webAddEditSearchKeyword(this,tiyData)
      },
      removeAutomatedWords(index){
        tiyData.tParams.searchKeyword.automatedWords.splice(index, 1);
      },
      addAutomatedWords(){
        if(this.searchKeyword.automatedWord != ""){
          tiyData.tParams.searchKeyword.automatedWords.push(this.searchKeyword.automatedWord);
          this.searchKeyword.automatedWord = "";
        }
      },
      modifyKeyword(index){
        let selectedKeyword = tiyData.tData.searchKeywordList[index];
        tiyData.tParams.searchKeyword.id = selectedKeyword.id;
        tiyData.tParams.searchKeyword.keyword = selectedKeyword.keyword;
        tiyData.tParams.searchKeyword.automatedWords = this.$toJson(selectedKeyword.automatedWords);
        tiyData.tParams.searchKeyword.isFuzzy = selectedKeyword.isFuzzy;
        tiyData.tParams.searchKeyword.synonym = selectedKeyword.synonym;
        tiyData.tStatus.modalAddEdit.isShow = true;
        tiyData.tStatus.modalAddEdit.title = "修改关键字";
      },
      deleteKeyword(index){
        let selectedKeyword = tiyData.tData.searchKeywordList[index];
        tiyData.tParams.deleteKeyword.id = selectedKeyword.id;
        tiyData.tParams.deleteKeyword.keyword = selectedKeyword.keyword;
        tiyData.tStatus.modalDelete.content = "确定删除关键字" + selectedKeyword.keyword + "的信息";
        tiyData.tStatus.modalDelete.isShow = true;
      },
      webDeleteKeyword(){
        webDeleteKeyword(this,tiyData)
      }
    },
    mounted(){
      init(this, tiyData);
      webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_form {
    padding: 1rem 2rem;
  }

  .modal_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key{
    min-width: 120px;
  }

</style>
